<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useDepartmentSelectStore } from '../../store/departmentSelect';
import department from '../../api/department';
import { useAddPosition } from '../../store/addPosition';
import AddPosition from './addPosition.vue';
import { usePositionListStore } from '../../store/positionList';
import position from '../../api/position';
import utils from '../../utils/utils';
import { useSearchPositionStore } from '../../store/position/positionSearch';
const searchPositionStore = useSearchPositionStore();
const positionListStore = usePositionListStore();
const addPositionStore = useAddPosition();
const positionName = ref('');
const status = ref('');
const treeSelectRef = ref(); // 组件实例引用
const departmentSelectStore = useDepartmentSelectStore();
// 配置树形组件属性
const treeProps = {
    value: 'value',
    label: 'label',
    children: 'children'
}
const departmentSelect = ref('');

const getDepartmentLabel = (tree: any[]): string => {
    if (!departmentSelect.value) return ''; // 清空时直接返回空
    for (const node of tree) {
        if (node.value === departmentSelect.value) {
            return node.label; // 直接返回找到的 label
        }
        if (node.children?.length) {
            const result = getDepartmentLabel(node.children); // 递归查找子节点
            if (result) return result; // 如果子节点找到，直接返回
        }
    }
    return '';
};
async function editPosition() {
    await position.getEditPositionDetail(positionListStore.selectedIds[0]).then(res => {
        addPositionStore.setPositionAdd(res.data.data)
        console.log(addPositionStore.positionAdd)
        addPositionStore.setIsOpen(true)
    }).catch(err => {
        console.log(err)
    })
}
async function deletePosition() {
    console.log(positionListStore.selectedIds)
    await position.deletePositionById(positionListStore.selectedIds).then(res => {
        if (res.data.code === 200) {
            utils.showMessage(res.data.message, 'success', 2000)
        } else {
            utils.showMessage("删除失败", 'error', 2000)
        }
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        positionListStore.changeLoading()
    })
    await position.getAllPosition(positionListStore.pageNum, positionListStore.pageSize).then(res => {
        positionListStore.setPositionList(res.data.data)
    }).catch(err => {
        console.log(err)
    })
}
async function searchPosition() {
    position.getSpeciePosition(searchPositionStore.departmentSelect, searchPositionStore.positionName, searchPositionStore.status, positionListStore.pageNum, positionListStore.pageSize).then((res) => {
        positionListStore.setPositionList(res.data.data.data);
        positionListStore.total = res.data.data.total;
    }).catch((err) => {
        console.log(err);
    }).finally(() => {
        positionListStore.changeLoading()
    })
}
watch(departmentSelect, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        searchPositionStore.departmentSelect=getDepartmentLabel(departmentSelectStore.departmentSelect);
    }
})
onMounted(async () => {
    await department.getDepartmentSelect().then((res) => {
        departmentSelectStore.setDepartmentSelect(res.data.data);
    }).catch((err) => {
        console.log(err);
    })
    await position.getPositionCount(departmentSelect.value, positionName.value, status.value).then((res) => {
        positionListStore.total = res.data.data;
    }).catch((err) => {
        console.log(err);
    });
});
</script>
<template>
    <div class="position-header">
        <!-- 每个表单项包裹在 form-item 容器中 -->
        <!-- 第一行：搜索条件 -->
        <div class="first-row">
            <div class="form-item">
                <label>所属部门：</label>
                <el-tree-select ref="treeSelectRef" :props="treeProps" v-model="departmentSelect" check-strictly 
                    clearable :data="departmentSelectStore.departmentSelect" :render-after-expand="false"
                    class="form-control" placeholder="请选择部门" />
            </div>

            <div class="form-item">
                <label>岗位名称：</label>
                <el-input v-model="searchPositionStore.positionName" placeholder="请输入岗位名称" class="form-control" clearable />
            </div>

            <div class="form-item">
                <label>状态：</label>
                <el-select v-model="searchPositionStore.status" clearable placeholder="全部状态" class="form-control">
                    <el-option label="正常" value=1 />
                    <el-option label="停用" value=0 />
                </el-select>
            </div>

            <div class="form-actions">
                <el-button type="primary" @click="searchPosition">搜索</el-button>
                <el-button @click="">重置</el-button>
            </div>
        </div>
        <!-- 第二行：操作按钮 -->
        <div class="second-row">
            <div class="button-group">
                <el-button type="success" @click="addPositionStore.setIsOpen(true)"><el-icon>
                        <Plus />
                    </el-icon>新增</el-button>
                <el-button :disabled="positionListStore.selectedIds.length !== 1" type="warning"
                    @click="editPosition"><el-icon>
                        <Edit />
                    </el-icon>修改</el-button>
                <el-button type="danger" @click="deletePosition"><el-icon>
                        <Delete />
                    </el-icon>删除</el-button>
                <el-button type="info"><el-icon>
                        <Bottom />
                    </el-icon>导出</el-button>
            </div>
        </div>
    </div>
    <AddPosition />
</template>

<style scoped>
.form-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.form-item label {
    font-size: 14px;
    color: #606266;
    margin-right: 8px;
    white-space: nowrap;
}

.form-control {
    width: 220px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

/* 修改后的样式 */
.position-header {
    display: flex;
    flex-direction: column;
    /* 改为垂直布局 */
    gap: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 20px;
}

.first-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    /* 允许换行 */
}

.second-row {
    display: flex;
    align-items: center;
    border-top: 1px solid #ebeef5;
    /* 添加分割线 */
    padding-top: 16px;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

/* 调整Element组件样式 */
:deep(.el-tree-select__wrapper),
:deep(.el-input__wrapper) {
    border-radius: 4px;
    transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover),
:deep(.el-select:hover .el-input__wrapper) {
    border-color: #409eff;
}

:deep(.el-tree-select__dropdown) {
    margin-top: 4px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-button {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
}

.el-button--primary {
    background: #409eff;
    border-color: #409eff;
}

.el-button--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
}

@media screen and (max-width: 768px) {
    .position-header {
        padding: 12px;
        gap: 12px;
    }

    .first-row {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .form-item {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .form-item label {
        margin-right: 0;
    }

    .form-control {
        width: 100%;
    }

    .form-actions {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .form-actions .el-button {
        flex: 0 0 48%;
    }

    .second-row {
        width: 100%;
        padding-top: 12px;
    }

    .button-group {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .button-group .el-button {
        flex: 1;
        padding: 6px 4px;
        font-size: 12px;
    }

    .button-group .el-button .el-icon {
        margin-right: 2px;
        font-size: 12px;
    }
}
</style>